<template>
    <div class="main-container">
        <header class="main-header">
            <div class="header-logo">
                <img class="header-logo-img" :src="require('@/assets/logo/7.png')" />
                <img class="header-logo-img" :src="require('@/assets/logo/8.png')" />
                <img class="header-logo-img" :src="require('@/assets/img/logo.png')" />

            </div>
            <div class="header-menu">
                <template v-for="item in menuList">
                    <span class="header-menu-list" :class="nowRouter===item.url&&'header-menu-active'" @click="jump(item.url)"
                        v-if="item.isRouter">{{item.name}}</span>
                    <a-popover title="" v-else>
                        <template slot="content">
                            <div class="header-user-action" @click="jumpOut(child.url)" v-for="child in item.list">{{child.title}}
                            </div>
                        </template>
                        <span class="header-menu-list">{{item.name}}</span>
                    </a-popover>
                </template>

            </div>
            <div class="header-action-box">
                <div class="user-box" v-if="userInfo.id">
                    <a-popover class="header-popo" title="">
                        <a-avatar class="avatar" alt="" :size="32" icon="user"
                            :src="userInfo.headPortrait&&userInfo.headPortrait" />
                        <template slot="content">
                            <div class="header-user-action" @click="logout">退出登录</div>
                            <div class="header-user-action" @click="editUser">修改个人信息</div>
                            <div class="header-user-action" @click="editPass">修改密码</div>
                            <div class="header-user-action" @click="resetPass">用户中心</div>
                            <div class="header-user-action" @click="showBroker" v-if="userInfo.hasTechnicalRepresentative===null">
                                申请技术经纪人</div>
                        </template>
                        <span class="header-username text-nowarp" v-if="userInfo.name">{{userInfo.name}}</span>
                    </a-popover>
                </div>
                <a-button type="default" @click="clickLogin" v-else>登录/注册</a-button>
            </div>
        </header>
        <div class="router-box">
            <router-view />
        </div>

        <footer class="main-footer">
            <div class="footer-panel">
                <div>
                    <img class="footer-logo-img" :src="require('@/assets/img/logo-w.png')" />
                </div>
                <div class="footer-info">
                    <div class="footer-info-list">
                        <div>©版权所有</div>
                        <div>成都中医药大学</div>
                    </div>
                    <div class="footer-info-list">
                        <div>技术支持</div>
                        <div>成都原链科技有限公司</div>
                    </div>
                    <div class="footer-info-list">
                        <div>地址</div>
                        <div>四川省成都市温江区金府路东段589</div>
                    </div>
                    <div class="footer-info-list" style="flex-grow:1">
                        <div>邮编</div>
                        <div>611137</div>
                    </div>
                    <div class="footer-info-list footer-qrcode-box">
                        <img class="footer-qrcode" :src="require('@/assets/img/footer-qrcode.png')" />
                        <div>企业公众号</div>
                    </div>
                </div>
                <div class="beian-box">
                    蜀ICP备05006378号-1
                </div>
            </div>

        </footer>
        <LoginVue :visible="loginVisible" @closeDrawer="() => loginVisible = false" v-if="loginVisible" />
        <EditUserVue :visible="editUserVisible" @closeDrawer="() => editUserVisible = false" />
        <EditPassVue :visible="editPassVisible" @closeDrawer="() => editPassVisible = false" />
        <BrokerDrawerVue :visible="brokerVisible" @closeDrawer="() => brokerVisible = false" />

    </div>
</template>

<script lang="ts">
import { UserModule } from "@/store/modules/userModules";
import { Vue, Component, Watch } from "vue-property-decorator";
import LoginVue from "@/views/login/login.vue";
import EditPassVue from "@/views/login/editPass.vue";
import EditUserVue from "@/views/login/editUser.vue";
import BrokerDrawerVue from "@/views/login/brokerDrawer.vue";
import { getStorageUserInfo, utilLogout } from "@/utils";
import config from "@/utils/config";
@Component({
    name: "dom",
    components: { LoginVue, EditPassVue, EditUserVue, BrokerDrawerVue },
})
export default class index extends Vue {
    menuList = [
        { name: "首页", url: "/index", isRouter: true },
        { name: "创新需求", url: "/demand", isRouter: true },
        { name: "成果直通车", url: "/achievement", isRouter: true },
        {
            name: "知识产权",
            isRouter: false,
            list: [
                { title: "国家知识产权局", url: "https://www.cnipa.gov.cn/" },
                { title: "专利库", url: "https://www.ipscc.org.cn/" },
                { title: "知识产权管理系统", url: "https://zschglxt.cdutcm.edu.cn/fvue/loginView" },
            ],
        },
        { name: "成果交易", url: "/announcement", isRouter: true },
        { name: "资源对接", url: "/resource", isRouter: true },
        { name: "专家库", url: "/talent", isRouter: true },
        // { name: "社区", url: "/community", isRouter: true },
    ];
    userInfo = {};
    nowRouter = "";
    get moduleRouter() {
        return UserModule.nowRoute;
    }
    @Watch("moduleRouter")
    moduleRouterChange() {
        const find = this.menuList.find((item) => {
            return item.url === this.moduleRouter;
        });
        if (find) {
            this.nowRouter = this.moduleRouter + "";
        }
    }
    mounted() {
        this.userInfo = getStorageUserInfo();
        this.nowRouter = this.$route.path;
    }
    jump(url: string) {
        this.$router.push(url);
    }
    logout() {
        this.$confirm({
            title: "确定要退出登录吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                utilLogout();
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    resetPass() {
        window.open(config.adminUrl + "/#/home");
    }

    loginVisible = false;
    clickLogin() {
        this.loginVisible = true;
    }

    jumpOut(url: string) {
        window.open(url);
    }
    editUserVisible = false;
    editUser() {
        this.editUserVisible = true;
    }
    editPassVisible = false;
    editPass() {
        this.editPassVisible = true;
    }
    brokerVisible = false;
    showBroker() {
        this.brokerVisible = true;
    }

    get loginPanelType() {
        return UserModule.showLoginPanel;
    }
    @Watch("loginPanelType")
    onLoginPanelTypeChange() {
        if (this.loginPanelType) {
            this.clickLogin();
            UserModule.setShowLoginPanel(false);
        }
    }
}
</script>

<style lang="scss">
.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 1360px;
    .router-box {
        flex-grow: 1;
    }
    .main-header {
        display: flex;
        align-items: center;
        background-color: #f8fcff;
        justify-content: space-between;
        height: 88px;
        padding: 0 70px;
    }
    .header-logo-img {
        height: 45px;
        display: inline-block;
        margin-right: 10px;
    }
    .header-menu {
        height: 100%;
        font-size: 18px;
        flex-grow: 1;
        text-align: right;
    }
    .header-menu-list {
        display: inline-flex;
        text-align: center;
        color: #82848a;
        padding: 0 20px;
        height: 100%;
        align-items: center;
        cursor: pointer;
        vertical-align: top;
        border-bottom: solid 4px transparent;
    }
    .header-menu-list:hover {
        color: #102040;
    }
    .header-menu-active {
        color: #102040;
        border-bottom: solid 4px #2f65f3;
    }
    .header-action-box {
        margin-left: 20px;
    }
    .header-popo {
        display: flex;
        align-items: center;
    }
    .header-username {
        margin-left: 10px;
        cursor: pointer;
    }

    .main-footer {
        background: linear-gradient(90deg, #3769fe 0%, #00c8ff 100%);
    }
    .footer-panel {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 45px 0;
        height: 320px;
    }
    .footer-logo-img {
        width: 260px;
    }
    .footer-info {
        margin-top: 20px;
        display: flex;
    }
    .footer-qrcode {
        width: 80px;
    }
    .footer-info-list {
        color: #fff;
        font-size: 16px;
        vertical-align: bottom;
        margin-right: 100px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
    .footer-qrcode-box {
        margin-right: 0;
    }
    .beian-box {
        font-weight: bold;
        color: #fff;
        font-size: 20px;
        margin-top: 35px;
    }
}
.header-user-action {
    line-height: 40px;

    transition: all 0.4s ease-in-out;
    cursor: pointer;
    &:hover {
        color: #2f65f3;
    }
}
@media screen and (max-width: 1500px) {
    .main-container {
        .header-menu-list {
            padding: 0 10px;
        }
    }
}
</style>
